<template>
  <div style="padding:50px 10px;">
    <el-form label-width="100px">
      <el-form-item label="投资人姓名">
        <el-input v-model="form.comment" />
      </el-form-item>
      <el-form-item label="平台账号">
        <el-select v-model="form.user" filterable remote placeholder="请输入用户电话" :remote-method="remoteMethod">
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="投资类型">
        <el-select v-model="type" @change="changeType">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <div v-if="type === 0">
        <el-form-item label="投资区域">
          <el-select v-model="form.region">
            <el-option
              v-for="item in regions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投资门店数">
          <el-input v-model="form.extraData.totalStores" />
        </el-form-item>
        <el-form-item label="分红开始日期">
          <el-date-picker
            v-model="form.extraData.startTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="投资仓库">
          <el-select v-model="form.stores[0]">
            <el-option
              v-for="item in stores"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投资产品">
          <div>
            <el-transfer v-model="form.specifications" filterable :data="specifications" :titles="titles" />
          </div>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      id: Number(this.$route.params.id),
      titles: ['产品库', '投资产品'],
      users: [],
      form: {
        comment: '',
        user: '',
        region: '',
        extraData: {
          totalStores: ''
        },
        stores: [],
        specifications: []
      },
      specifications: [],
      stores: [],
      types: [
        {
          label: '门店投资人',
          value: 0
        },
        {
          label: '仓库投资人',
          value: 1
        }
      ],
      type: 0,
      regions: []
    }
  },
  created() {
    this.getStores()
    this.getRegions()
    this.getSpecifications()
    if (this.id > 0) {
      this.axios.get(`/manage/investors/${this.id}`).then((res) => {
        this.form.comment = res.data.comment
        this.form.user = res.data.user.id
        this.remoteMethod(res.data.user.__toString)
        if (res.data.region) {
          this.form.region = res.data.region.id
        } else {
          this.type = 1
        }
        if (res.data.extraData && res.data.extraData.totalStores) {
          this.form.extraData.totalStores = res.data.extraData.totalStores
        }
        if (res.data.extraData && res.data.extraData.startTime) {
          this.form.extraData.startTime = res.data.extraData.startTime
        }
        if (res.data.stores && res.data.stores.length > 0) {
          this.form.stores[0] = res.data.stores[0].id
        }
        if (res.data.specifications && res.data.specifications.length > 0) {
          const specs = []
          for (const i of res.data.specifications) {
            specs.push(i.id)
          }
          this.form.specifications = specs
        }
      })
    }
  },
  methods: {
    remoteMethod(e) {
      console.log(e)
      this.axios.get(`/manage/users`, {
        params: {
          '@filter': `entity.getUsername() matches '${e}'`
        }
      }).then((res) => {
        console.log(res.data)
        this.users = res.data
      })
    },
    // 仓库
    getStores() {
      this.axios.get(`/manage/stores`, {
        params: {
          '@filter': `entity.getCategory().getId() == 2`
        }
      }).then((res) => {
        console.log('store', res.data)
        this.stores = res.data
      })
    },
    getRegions() {
      this.axios.get(`/manage/regions`).then((res) => {
        this.regions = res.data
      })
    },
    // 获取仓库类型的产品规格列表
    getSpecifications() {
      this.axios.get(`/manage/specifications`, {
        params: {
          '@filter': `entity.getProduct().getIsOnSale() == true && entity.getProduct().getCategory().getParent().getParent() == 2`,
          '@display': `{
            'key' : 'entity.getId()',
            'label': 'entity.getProduct().getName()'
          }`,
          limit: 10000
        }
      }).then((res) => {
        console.log('specifications', res.data)
        this.specifications = res.data
      })
    },
    // 修改投资类型
    changeType() {
      console.log(this.type)
      if (this.type === 0) {
        // 门店投资人，清空门店
        this.form.stores = []
      } else {
        // 仓库投资人，清空区域
        this.form.region = ''
        this.form.extraData.totalStores = ''
      }
    },
    submit() {
      console.log(this.form)
      if (this.id) {
        this.axios.put(`/manage/investors/${this.id}`, this.form).then((res) => {
          this.$message.success('保存成功')
          this.$router.go(-1)
        })
      } else {
        this.axios.post(`/manage/investors`, this.form).then((res) => {
          this.$message.success('保存成功')
          this.$router.go(-1)
        })
      }
    }
  }
}
</script>

<style >
 .el-transfer-panel{
    width: 500px !important;
 }
</style>
